<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="registered.jsp"/>
<html>
<head>
    <meta charset="utf-8"/>
    <title>登录界面</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="./layui/css/layui.css" media="all"/>
    <script src="./layui/layui.js"></script>
    <script>

        layui.use(["form", 'layer'], function () {


        });

        function resister() {
            const $ = layui.$;
            const layer = layui.layer;

            layer.open({
                type: 1,
                offset: '180px',
                title: '注册用户',
                skin: 'layui-layer-molv',
                area: ['500px'],
                content: $('#registered-layer')
            });
        }
    </script>
    <script>
        function validate() {
            const password = document.getElementById("password").value;

            const password_verify = document.getElementById("password-verify").value;

            if (password === password_verify) {
                document.getElementById("tishi").innerHTML =
                    "<font color='green'>两次密码相同</font>";

                document.getElementById("button").className = "layui-btn";
            } else {
                document.getElementById("tishi").innerHTML =
                    "<font color='red'>两次密码不相同</font>";

                document.getElementById("button").className = "layui-btn layui-btn-disabled";
            }
        }
    </script>
    <%
        boolean resister_success = false;
        boolean first = true;
        if (request.getAttribute("resister_success") != null) {
            resister_success = (boolean) request.getAttribute("resister_success");
            first = false;
        }

        if (resister_success) {
    %>
    <script>
        layui.use('layer', function () {
            const layer = layui.layer;
            layer.msg("注册成功", {icon: 6});

        });
    </script>
    <%} else if (!first){%>
    <script>
        layui.use('layer', function () {
            const layer = layui.layer;
            layer.msg("注册失败", {icon: 5});

        });
    </script>
    <%}%>
    <style>
        .bg {
            background-image: url("../../images/bg.png");
        }

        .main {
            border-radius: 20px;
            width: 300px;
            height: auto;
            position: absolute;
            top: 30%;
            left: 50%;
            margin-left: -150px;
            /* background-color: aqua; */
        }

        .main-img {
            position: relative;
            left: 50%;
            margin-left: -45px;
        }
    </style>
</head>
<body class="bg">
<div class="main">
    <form class="layui-form" action="login" method="post">
        <div class="layui-form-item main-img">
            <img
                    style="border-radius: 20px"
                    src="./images/logo.jpg"
                    alt=""
                    width="90"
                    height="90"
            />
        </div>
        <div class="layui-form-item">
            <input
                    type="text"
                    name="username"
                    lay-verify="required"
                    lay-reqtext="用户名不可以为空"
                    placeholder="请输入账号"
                    autocomplete="off"
                    class="layui-input"
            />
        </div>
        <div class="layui-form-item">
            <input
                    type="password"
                    name="password"
                    lay-verify="required"
                    lay-reqtext="密码不可以为空"
                    placeholder="请输入密码"
                    autocomplete="off"
                    class="layui-input"
            />
        </div>
        <%
            String errorMsg = (String) request.getAttribute("errorMsg");
            if (errorMsg == null) {
                errorMsg = "";
            }
        %>
        <div class="layui-form-item" style="color: red; text-align: center;"><%=errorMsg%>
        </div>
        <div
                class="layui-form-item"
                style="color: red; text-align: center"
        ></div>
        <div class="layui-form-item">
            <button
                    style="width: 100px; float: left"
                    type="button"
                    class="layui-btn layui-btn-normal"
                    onclick="resister()"
            >
                注册
            </button>
            <button
                    style="width: 180px; float: right;"
                    type="submit"
                    class="layui-btn layui-btn-normal"
                    lay-submit=""
                    lay-filter="demo1"
            >
                登录
            </button>
        </div>
    </form>
</div>
</body>
</html>
